<template>
  <div class="contentWrap">
    <div class="boxTop">
      <van-row style="height: 100%" type="flex" align="center">
        <van-col span="4">设备</van-col>
        <van-col span="8">{{ deviceList.equipmentName }}</van-col>
        <van-col span="3"
          ><div style="display: flex; align-items: center">
            <icon name="stop" color="#FC5A69" size="30" /></div
        ></van-col>
        <van-col span="9">异常</van-col>
      </van-row>
    </div>
    <div class="box">
      <van-row>
        <van-col span="8">
          <div class="title">
            告警编号
          </div>
        </van-col>
        <van-col span="16">
          <div class="content red">
            <!-- {{deviceList.equipmentNumber}} -->
            GJ20200901135901
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            告警地址
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{deviceList.building + deviceList.floor + deviceList.room}} -->
            A幢3层302室
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            告警时间
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{deviceList.reportTime}} -->
            2023-12-01 12:03:43
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            责任人
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            张三 13800000000
            <!-- {{deviceList.processUser}} -->
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处置时间
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            {{ sysTime }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处置人员
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{ deviceList.processUser }} -->
            {{ pcUserInfo.account }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处理状态
          </div>
        </van-col>
        <van-col span="16">
          <div>
            <!-- deviceList.processState -->
            <field
              right-icon="arrow-down"
              readonly
              clickable
              name="picker"
              :value="'处理中'"
              placeholder="选择状态"
              @click="showPickerState = true"
            />
            <popup v-model="showPickerState" position="bottom">
              <picker
                show-toolbar
                :columns="columnsState"
                @confirm="onConfirmState"
                @cancel="showPickerState = false"
              />
            </popup>
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处理备注
          </div>
        </van-col>
        <van-col span="16">
          <div class="textArea">
            <field
              v-model="deviceList.remark"
              rows="3"
              autosize
              label=""
              type="textarea"
              placeholder="请输入内容"
              maxlength="100"
              show-word-limit
            />
          </div>
        </van-col>
      </van-row>

      <!-- <van-row>
        <van-col span="8">
          <div class="title">
            照片上传
          </div>
        </van-col>
        <van-col span="16">
          <div class="upload">
            <uploader
              v-model="fileList"
              :before-read="beforeRead"
              :before-delete="deleteFile"
              :delete="deletePreview"
              :after-read="afterRead"
              multiple
              :max-count="3"
            >
              <van-button type="primary">点击上传</van-button>
            </uploader>
          </div>
        </van-col>
      </van-row> -->

      <van-row class="btnWrap">
        <van-button type="primary" @click="submitTask()">提 交</van-button>
      </van-row>
    </div>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Field,
  Popup,
  Picker,
  Uploader,
  Button,
  Icon,
  Dialog,
  Toast
} from "vant";
import { getDeviceDetail, getSubmitRegistration } from "@/api/Digital";
import { upload, deleteFile } from "@/api/file";
export default {
  components: {
    VanCol: Col,
    VanRow: Row,
    Field,
    Popup,
    Picker,
    Uploader,
    VanButton: Button,
    Icon
  },
  computed: {
    pcUserInfo() {
      return JSON.parse(sessionStorage.getItem("pcUserInfo"));
    }
  },
  data() {
    return {
      deviceId: this.$route.query.deviceId,
      deviceType: this.$route.query.deviceType,
      state: "",
      remark: "",
      columnsState: ["待处理", "处理中", "已完成"],
      showPickerState: false,
      deviceList: {
        processState: "",
        remark: ""
      },
      sysTime: "",
      fileUrlName: "",
      fileList: [],
      fileListSubmit: []
    };
  },
  mounted() {
    let myDate = new Date();
    this.sysTime = myDate.toLocaleString();
    this.$store.commit("setTopBg", "red-bg");
    this.deviceDetail(this.deviceId);
  },
  methods: {
    // 显示设备详情
    async deviceDetail(id) {
      return;
      let res = await getDeviceDetail({
        equipmentNumber: id
      });
      if (res.code === 0) {
        this.deviceList = res.result;
        this.deviceList.processState = this.columnsState[
          res.result.processState
        ];
      } else {
        Toast.fail(res.msg);
      }
    },
    // 提交 处置登记详情
    async submitTask() {
      if (!this.deviceList.remark) {
        Toast.fail("处理备注不能为空");
        return;
      }
      Toast.success("处理登记成功");

      return;
      let res = await getSubmitRegistration({
        equipmentNumber: this.deviceId,
        processState: this.columnsState.findIndex(
          item => item === this.deviceList.processState
        ),
        processRemark: this.deviceList.remark,
        fileUrlList: this.fileListSubmit
      });
      if (res.code === 0) {
        Toast.success("提交成功");
        this.$router.go(-1);
      } else {
        Toast.fail(res.msg);
      }
    },
    onConfirmState(value) {
      this.deviceList.processState = value;
      this.showPickerState = false;
    },
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast.fail("请上传jpg或png格式图片");
        return false;
      }
      return true;
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      return;
      let params = new FormData();
      params.append("file", file.file);
      let res = await upload(params);
      if (res.code === 0) {
        this.fileListSubmit.push(res.result);
        Toast.success("上传成功");
        file.fileInfo = res.result;
      } else {
        this.fileList.splice(
          this.fileList.findIndex(item => item.file.name === file.file.name),
          1
        );
        Toast.fail(res.msg);
      }
    },
    deleteFile(file) {
      Dialog.confirm({
        message: "确定要删除吗？",
        theme: "round-button"
      })
        .then(() => {
          let deleteIndex = this.fileList.findIndex(
            item => item.file.name === file.file.name
          );
          this.fileList.splice(deleteIndex, 1);
          let deleteIndex2 = this.fileListSubmit.findIndex(
            item => item.indexOf(file.file.name) > -1
          );
          this.fileListSubmit.splice(deleteIndex2, 1);
          return;
          deleteFile({ fileName: file.fileInfo }).then(res => {
            if (res.code === 0) {
              Toast.success("删除成功");
              let deleteIndex = this.fileList.findIndex(
                item => item.file.name === file.file.name
              );
              this.fileList.splice(deleteIndex, 1);
              let deleteIndex2 = this.fileListSubmit.findIndex(
                item => item.indexOf(file.file.name) > -1
              );
              this.fileListSubmit.splice(deleteIndex2, 1);
            }
          });
        })
        .catch(() => {});
    },
    // // 根据原图片名称获取新图片名称
    // getNewName (num) {
    //   let result
    //   for (let i of this.fileListSubmit) {
    //     if (i.originalFileName === num) {
    //       result = i.newFileName
    //     }
    //   }
    //   return result
    // },
    deletePreview() {}
  }
};
</script>

<style lang="scss" scoped>
.contentWrap {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 5%;
  .boxTop {
    width: 100%;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0px #cccccc;
    border-radius: 5px;
    padding: 10px 5%;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .box {
    width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0px #cccccc;
    border-radius: 5px;
    padding: 20px 5%;
    box-sizing: border-box;
    .van-row {
      margin-bottom: 25px;
    }
    .title {
      font-size: 15px;
      font-family: PingFang SC Medium, PingFang SC Medium-Medium;
      font-weight: 500;
      color: #666666;
    }
    .content {
      font-size: 15px;
      font-family: PingFang SC Bold, PingFang SC Bold-Bold;
      font-weight: 700;
      color: #333333;
    }
    .red {
      color: #fc5a69;
    }
  }
}
.van-cell {
  box-sizing: border-box;
  width: 60%;
  padding: 0 0 0 5px;
  border: 2px solid #fc5a69;
  border-radius: 10px;
  /deep/ .van-field__right-icon {
    margin-right: 1%;
    color: #fc5a69;
  }
}
.textArea {
  .van-cell {
    box-sizing: border-box;
    width: 80%;
  }
  /deep/ .van-field__word-limit {
    padding-right: 5px;
  }
}
.upload {
  width: 100%;
  /deep/ .van-uploader {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
    }
    .van-button--normal {
      border: 2px solid #fc5a69;
      border-radius: 10px;
      color: #666666;
      background: transparent;
      width: 80%;
      height: 80px;
    }
  }
}
.btnWrap {
  text-align: center;
  .van-button--normal {
    width: 90%;
    background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
    box-shadow: 0px 1px 2px 0px #d93e3e;
    border: none;
    border-radius: 20px;
  }
}
</style>
